// 修改密码
import React from 'react';
import {
  ScrollView, StyleSheet, View, TextInput, ImageBackground
} from 'react-native';
import { Button, WhiteSpace } from 'antd-mobile-rn';
import { NavigationActions } from 'react-navigation';
import BaseView from './BaseView';

export default class ChangePassword extends BaseView {
  constructor(props) {
    super(props);
    this.state = {
      ...this.BaseState,
      oldpsw: '',
      psw: '',
      newpsw: ''
    };
  }

  // 生命周期render前
  componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({ goback: this.goback.bind(this) });
  }

  componentDidMount() {
    super.componentDidMount();
    this.props.navigation.setParams({
      title: '修改密码'
    });
    // super.setState({
    //   loading: true
    // });
  }

  goback() {
    const { navigation } = this.props;
    const backAction = NavigationActions.back();
    navigation.dispatch(backAction);
  }

  gotoLogin(oldpsw, psw, newpsw) {
    if (!oldpsw) {
      alert('请输入旧密码');
      return false;
    }
    if (psw.length < 8) {
      alert('请输入8-18位字母+数字组合密码');
      return false;
    }
    if (psw.length > 18) {
      alert('请输入8-18位字母+数字组合密码');
      return false;
    }
    if (newpsw !== psw) {
      alert('两次密码输入不一致，请重新输入');
      return false;
    }

    this.toLogin();
    return false;
    // 提交保存
  }

  toLogin() {
    const { navigation } = this.props;

    const navigateAction = NavigationActions.navigate({
      routeName: 'Login',
      params: {}
    });
    navigation.dispatch(navigateAction);
  }

  chkPrice(obj) {
    const reg = /^[0-9a-zA-Z]+$/;
    if (!reg.test(obj)) {
      obj = obj.substr(0, obj.length - 1);
    }
    return obj;
  }

  renderPage() {
    const { oldpsw, psw, newpsw } = this.state;
    return (
      <View style={changePassword.container}>
        <ImageBackground
          style={changePassword.backgroundImage}
          source={{
            uri:
              'https://mxb-bucket.oss-cn-beijing.aliyuncs.com/_app/%E4%BF%AE%E6%94%B9%E5%AF%86%E7%A0%81%E8%83%8C%E6%99%AF%E5%9B%BE.jpg'
          }}
          resizeMode="cover"
        >
          <ScrollView
            contentContainerStyle={changePassword.wrap}
            automaticallyAdjustContentInsets={false}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          >
            <View style={changePassword.row}>
              <View style={changePassword.inputWrap}>
                <WhiteSpace size="lg" />
                <TextInput
                  style={changePassword.input}
                  placeholder="请输入原始密码"
                  underlineColorAndroid="transparent"
                  secureTextEntry
                  value={oldpsw}
                  onChangeText={(text) => {
                    this.setState({ oldpsw: this.chkPrice(text) });
                  }}
                />
                <WhiteSpace size="lg" />
                <TextInput
                  style={changePassword.input}
                  placeholder="请输入新密码"
                  underlineColorAndroid="transparent"
                  secureTextEntry
                  value={psw}
                  onChangeText={(text) => {
                    this.setState({ psw: this.chkPrice(text) });
                  }}
                />
                <WhiteSpace size="lg" />
                <TextInput
                  style={changePassword.input}
                  placeholder="请重新输入新密码"
                  underlineColorAndroid="transparent"
                  secureTextEntry
                  value={newpsw}
                  onChangeText={(text) => {
                    this.setState({ newpsw: this.chkPrice(text) });
                  }}
                />
              </View>
            </View>
            <Button
              type="primary"
              style={changePassword.btnWrap}
              onClick={() => {
                this.gotoLogin(oldpsw, psw, newpsw);
              }}
            >
              提 交
            </Button>
          </ScrollView>
        </ImageBackground>
      </View>
    );
  }
}

const changePassword = StyleSheet.create({
  container: {
    flex: 1
  },
  backgroundImage: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: null,
    height: null,
    // 不加这句，就是按照屏幕高度自适应
    // 加上这几，就是按照屏幕自适应
    // resizeMode:Image.resizeMode.contain,
    // 祛除内部元素的白色背景
    backgroundColor: 'rgba(0,0,0,0)'
  },
  wrap: {
    flex: 1,
    alignItems: 'center',
    marginTop: SCALE(40)
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  inputWrap: {
    width: SCALE(576)
  },
  input: {
    width: SCALE(576),
    height: SCALE(76),
    borderWidth: 1,
    borderColor: '#ccc',
    borderStyle: 'solid',
    borderRadius: 8,
    paddingRight: SCALE(30),
    paddingLeft: SCALE(30),
    backgroundColor: '#fff',
    position: 'relative'
  },
  btnWrap: {
    marginTop: SCALE(80),
    width: SCALE(576),
    height: SCALE(76),
    backgroundColor: '#044e8d',
    borderWidth: 0
  }
});
